<template>
  <view class="user-header">
    <view class="user-info">
      <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      <view class="info-right">
        <text class="username">{{ userInfo.nickname || 'Daisy' }}</text>
        <navigator url="/pages/user/bind-phone" class="bind-phone">
          <text>绑定手机</text>
        </navigator>
      </view>
    </view>
    <view class="user-stats">
      <view class="stat-item"
        v-for="(item, index) in stats"
        :key="index"
        @click="navigateTo(item.url)"
      >
        <text class="num">{{ userInfo[item.key] || item.defaultValue }}</text>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

const stats = ref([
  { label: '收藏', key: 'collectCount', defaultValue: 12, url: '/pages/user/collect' },
  { label: '足迹', key: 'footprintCount', defaultValue: 34, url: '/pages/user/footprint' },
  { label: '优惠券', key: 'couponCount', defaultValue: 5, url: '/pages/user/coupon' }
])

const navigateTo = (url) => {
  uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.user-header {
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      border: 4rpx solid #fff;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    }

    .info-right {
      flex: 1;

      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }

      .bind-phone {
        font-size: 26rpx;
        color: #666;
        display: flex;
        align-items: center;
        gap: 4rpx;
      }
    }
  }

  .user-stats {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 40rpx;

    .stat-item {
      text-align: center;
      flex: 1;

      .num {
        font-size: 40rpx;
        font-weight: bold;
        color: #ff5722;
        margin-bottom: 8rpx;
        display: block;
      }

      .label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
